<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card :body-style="{ padding: '20px' }">
          <div slot="header" class="clearfix">
            <span>选择授权</span>
          </div>
          <el-row>
            <el-col :span="12">
              <span>组织(单选):</span>
              <el-tree class="filter-tree" :data="treeData" 
              :node-key="defaultProps.id" :expand-on-click-node="false"
              :check-on-click-node="true"
              :show-checkbox="true"
              :props="defaultProps"
              :check-strictly="true"
              :highlight-current="true"
              :default-expand-all="true"
              @node-click="handleNodeChange"
              @check-change="handleCheckChange"
              @check="handleCheck"
              ref="deptTree">
              </el-tree>
            </el-col>
            <el-col :span="12">
              <span>角色(多选):</span>
              <el-checkbox-group ref="roleBox" v-model="checkedRoles"  @change="handleCheckedRoles" v-for="role in roles" :key="role.id">
                <el-row>
                  <el-checkbox  :checked="role.checked" :label="role.name">{{role.zh}}</el-checkbox>
                </el-row>
              </el-checkbox-group>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAllTree }  from '@/api/dept'
import { queryAll }  from '@/api/role'

  export default {
    data() {
      return {
        checkDeptId: null,
        roles: null,
        checkedRoles: [],
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label',
          id: 'id'
        },
        treeData: null
      }
    },
    created() {
     //获取所有org dept
      getAllTree().then(response => {
        this.treeData = response.data
        if(this.group.deptIds.length>0){
          this.checkDeptId = this.group.deptIds[0]
        }
      })
      //判断角色是否选中
      queryAll().then(response => {
        this.roles = response.data
        this.roles.forEach(a=>{
          a.checked = false
          if(this.group.roles.length>0){
            this.group.roles.forEach(e => {
              if(a.name===e.name){
                a.checked = true
              }
            });
          }
        })
      })
    },
    props: ['group'],
    watch: {
      group: function(val) {
        this.$refs.deptTree.setCheckedKeys([]);
      }
    },
    methods: {
      init(){
        var temp = this
        if (temp.group.dept && temp.group.dept.id) {
          temp.$refs.deptTree.setCheckedKeys([temp.group.dept.id]);
        } else {
          temp.$refs.deptTree.setCheckedKeys([]);
        }
        let id = setInterval(function() {
          temp.checkedRoles = [];
          if (temp.$refs.roleBox) {
             clearInterval(id);
            temp.group.roles.forEach(r=>{
              temp.checkedRoles.push(r.name);
            })
          }
        }, 100);
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      handleCheckedRoles(value) {
        this.group.roles = []
        this.roles.forEach(r=>{
          value.forEach(c=>{
            if(r.name===c){
              this.group.roles.push(r)
            }
          })
        })
      },
      handleNodeChange(item,node, self){
        this.checkDeptId = item.id
        this.$refs.deptTree.setCheckedKeys([item.id])    
        if (this.group.dept.id !== item.id) {
          this.group.dept = item;
        }
      },
      handleCheckChange(item,node,self){
        if(node==true){
          this.$refs.deptTree.setCheckedKeys([item.id]);
        }
      },
      handleCheck(item, checkedKeys) {
        this.checkDeptId = item.id
        if (this.group.dept.id !== item.id) {
          this.group.dept = item;
        }
      }
    }
  }
</script>